<template>
    <el-card shadow="never">
        <Captcha
            ref="captchaRef"
            v-model:disabled="state.disabled"
            v-model:text="state.codeText"
            unique-key="login/phone"
            keep-running
            :duration="60"
        />
        <el-button :disabled="state.disabled" type="primary" @click="handleGetCode">
            {{ state.codeText }}
        </el-button>
    </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Captcha from "@/components/captcha.vue";

const captchaRef = ref();
const state = reactive({ disabled: false, codeText: "" });

const handleGetCode = async () => {
    if (captchaRef.value.disabled) return;

    // 成功获取验证码
    // todo

    captchaRef.value.start();
};
</script>

<style scoped></style>
